<?php 
include_once ('../global.php');
$pl_id = $_GET['pl_id'];
$players = matchPlayer($mt_id,$pl_id);
$biaoji = isset($_GET['biaoji'])?$_GET['biaoji']:"";
if(empty($players)){
	if($mt_id == 4579){
		$mt_id = 4400;		
	}  
	else if($mt_id == 4400){
		$mt_id = 4579;	
	}
	$players = matchPlayer($mt_id,$pl_id);
	
if(empty($players)){
	
	
    echo "<script>alert('没有成绩');history.go(-1);;</script>";
    exit;
}
}
$sex_id = $players['playerSex'][$pl_id];
$mp_class =$players['classname'][$pl_id];

$color = (($mp_class == '男子组') ? '#659e59' :'#659e59'); 
if(strpos($mp_class,'B')!==false && $rd_id >2){
	$roundtext=array(
		1=>'第一轮',
		2 =>'决赛轮',
		3 =>'决赛轮',
		4 =>'',
	);
	$maxRound = 2;
	$mt_round = 2;
	$rd_id = 2;
}
else{
	$roundtext=array(
		1=>'第一轮',
		2 =>'第二轮',
		3 =>'决赛轮',
		4 =>'',
	);
	$maxRound = 3;
	$mt_round = 3;
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="<?php echo CSS_PATH?>main.css" rel="stylesheet" type="text/css">
<link href="<?php echo CSS_PATH?>index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?php echo JS_PATH?>jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<?php echo JS_PATH?>echarts.js"></script>
<script type="text/javascript" src="<?php echo JS_PATH?>main.js"></script>
<title>成绩卡-<?php echo $players['playerName'][$pl_id];?>-<?php echo $match_cn_name;?>-Scoring By 斯科云科技</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
 
<script>
    var  url=location.href;
	var wxdata;
		//alert(url.split("&")[0]);
		////console.log(url.replace(/\&/g,"%26").replace(/\#/g,"%23"));
    $.ajax({
        type : "get",
        //url : "../interface/joysports/Home/gettoken/?url="+ url.replace(/\&/g,"%26").replace(/\#/g,"%23"), location.href.split('#')[0]
		url : "../../interface/joysports/Home/gettoken/?url="+encodeURIComponent(location.href.split('#')[0]),
        dataType : "jsonp",
        jsonp: "callback",
        jsonpCallback:"success_jsonpCallback",
        success : function(data){
			console.log(data);
			wxdata = data;
            wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: [
                    'updateAppMessageShareData',//
                    'updateTimelineShareData'
                ]
            });
		wx.ready(function () {
        var shareData = {
            title: '<?php echo $match_cn_name?>-成绩直播-Scoring By 斯科云科技',
            desc: '<?php echo $course_name?>-Scoring By 斯科云科技',
            link: url,
             imgUrl: 'https://mapp.scoringchina.com/bmwjunior/mobile/images/logo.png'
        };
		//alert(wxdata.url);
		//alert(url);
        wx.updateAppMessageShareData(shareData);//分享给好友
        wx.updateTimelineShareData(shareData);//分享到朋友圈
        wx.onMenuShareQQ(shareData);//分享给手机QQ
        wx.onMenuShareWeibo(shareData);//分享腾讯微博
        wx.onMenuShareQZone(shareData);//分享到QQ空间
 
 
 
    });
    wx.error(function (res) {
		console.log(res);
        // alert(res.errMsg);//错误提示
 
    });
        },
        error:function(data){
			console.log(data);
            alert("连接失败！");
        }
    });
	
	/*  滚动到顶部*/
 $(function () {
   	 $("#go_top").hide();
	  $('#scoringlists').height( $(window).height()-120-130);
   })
 
   //scroll() 方法为滚动事件  
   $(window).scroll(function(){
       if ($(window).scrollTop()>100){
          $("#go_top").fadeIn(800);
        }else{
          $("#go_top").fadeOut(800);
        }
    });
 
   /* //返回顶部按钮点击
    $("#go_top").click(function(){
       $('body,html').animate({scrollTop:0},100);
       return false;
    });*/
	
	function gotottop(){
		 $('body,html').animate({scrollTop:0},100);
       return false;
	}
	


	var pullrefresh = {
	init : function() {
		var pos = {};
		var status = false;
		var divobj = null;
		var contentobj = null;
		var reloadflag = false;
		$('body').on('touchstart', function(e) {
			e = mygetnativeevent(e);
			pos.startx = e.touches[0].pageX;
			pos.starty = e.touches[0].pageY;
		})
		.on('touchmove', function(e) {
			e = mygetnativeevent(e);
			
			pos.curposx = e.touches[0].pageX;
			pos.curposy = e.touches[0].pageY;
			if(pos.curposy - pos.starty < 0 && !status) {
				return;
			}
			if(!status && $(window).scrollTop() <= 0) {
			
				status = true;
				divobj = document.createElement('div');
				divobj = $(divobj);
				divobj.css({'position':'relative', 'margin-left':'-85px'});
				$('body').prepend(divobj);
				contentobj = document.createElement('div');
				contentobj = $(contentobj);
				contentobj.css({'position':'absolute', 'height':'30px', 'top': '-30px', 'left':'50%'});
				contentobj.html('<img src="./images/icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>');
				contentobj.find('img').css({'-webkit-transition':'all 0.5s ease-in-out'});
				divobj.prepend(contentobj);
				pos.topx = pos.curposx;
				pos.topy = pos.curposy;
			}
			if(!status) {
				return;
			}
			if(status == true) {
				var pullheight = pos.curposy - pos.topy;
				if(pullheight >= 0 && pullheight < 100) {
					divobj.css({'height': pullheight/2 + 'px'});
					contentobj.css({'top': (-30 + pullheight/2 + 60) + 'px'});
					if(reloadflag) {
						contentobj.find('img').css({'-webkit-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)', 'transform':'rotate(180deg)'});
						contentobj.find('#refreshtxt').html('下拉可以刷新');
					}
					reloadflag = false;
				} else if(pullheight >= 100) {
					divobj.css({'height':pullheight/2 + 'px'});
					contentobj.css({'top': (-30 + pullheight/2 + 60 ) + 'px'});
					if(!reloadflag) {
						contentobj.find('img').css({'-webkit-transform':'rotate(360deg)', '-moz-transform':'rotate(360deg)', '-o-transform':'rotate(360deg)', 'transform':'rotate(360deg)'});
						contentobj.find('#refreshtxt').html('松开可以刷新');
					}
					reloadflag = true;
				}
			}
			e.preventDefault();
		})
		.on('touchend', function(e) {
			if(status == true) {
				if(reloadflag) {
					contentobj.html('<img src="./images/icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...');
					contentobj.animate({'top': (-30 + 75 + 60) + 'px'}, 618, 'linear');
					divobj.animate({'height': '75px'}, 618, 'linear', function() {
						//window.location = './index.php?mt_id='+mt_id + '&rd_id='+rd_id;
						
						getdata(rd_id,false,divobj,contentobj,status,function(){
							if(divobj){
								divobj.remove();
							}
							divobj = null;
							status = false;
							pos = {};
						});
						
					});
					
					return;
				}
			}
			if(divobj){
				divobj.remove();
			}
			divobj = null;
			status = false;
			pos = {};
		});
	}
};
function mygetnativeevent(event) {
	while(event && typeof event.originalEvent !== "undefined") {
		event = event.originalEvent;
	}
	return event;
};
$(document).ready(function() {
	//////console.log($('.pullrefresh').length)
	if($('.pullrefresh').length > 0) {
		pullrefresh.init();
	}
});


	function gotomain(){
		window.location = './main.php';
	}
	
	function goback(){
		var biaoji  = '<?php  echo $biaoji;?>';
		window.location = './index.php?biaoji='+biaoji;
	}
	
	
	
  // 下载视频
	function downloadVideo(url) {
		/*console.log('下载视频-------downloadVideo-',url)
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url+  '?response-content-disposition';

    var filename = url.substring(url.lastIndexOf('/') + 1);
    a.download = filename ;

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a*/
	
	//var url=$(this).attr("url");
         var xhr = new XMLHttpRequest();
         xhr.open('GET', url, true);
		  $('#loadingimg').show();
         xhr.responseType = 'arraybuffer';    // 返回类型blob
         xhr.onload = function () {
              if (xhr.readyState === 4 && xhr.status === 200) {
                   let blob = this.response;
                   // 转换一<?php echo t('units');?>blob链接
                   let u = window.URL.createObjectURL(new Blob([blob],{ type: 'video/mp4' }))
                   let a = document.createElement('a');
                   a.download ="video";
                   a.href = u;
                   a.style.display = 'none'
                   document.body.appendChild(a)
                   a.click();
                   a.remove();
				    $('#loadingimg').hide();
              }
			  
         };
         xhr.send();

	
	/*wx.saveVideoToPhotosAlbum({
		filePath:url,
		success (res) {
			alert(res.errMsg)
			}
			,
		fail (res) {
			alert(res.errMsg)
		}
		}
		)*/
}
	
	var mt_id = <?php echo $mt_id; ?>;
	var rd_id = <?php echo $rd_id; ?>;
	var mt_sts = '<?php echo $mt_sts; ?>';
	var mt_round = <?php echo $mt_round; ?>;
	var pl_id = <?php echo $pl_id; ?>;
	var selectrd_id = "";

	var myChart ="";
	var mypie="";
	var myradar="";
	var playerscorecard = "";
	var time=60*5; //自动刷新五分钟
	getdata(rd_id,true);
	initload();




 var interval="";
 function initload(){
    interval = setInterval(function(){
			////console.log('更新了');
			if(mt_sts == 'O'){
				time=60*5;
				getdata(rd_id,false);			
			}
			else if(mt_sts == 'N'){
				time = 60* 30; //半小时刷新一次
				getdata(rd_id,false);
			}
			else{
				////console.log('更新了');
				time=5;
				getdata(rd_id,false);		
				//clearInterval(interval);
			}
    },time*1000);
 }
	
	function getdata(rd,isloading,divobj,contentobj,status,func){
			if(isloading){
			   $('#loadingimg').show();
			}
		   // ////console.log(rd);
			$.ajax({
                    url:'./data/detail-data.php?time='+Date.now()+'&mt_id='+mt_id+'&rd_id='+rd_id+'&pl_id='+pl_id,
                    dataType:"html",
                    success:function(res){
                        //console.log(res)
                        var score_new=res.split('<--split-->');
						
                        // $("#newhtml").html(res);
                        // var score_new = $("#newhtml .lf_scroll_box1").html();
						 $("#scoringlists").html(score_new[0]);
                        // $("#scoringlistshbh").html(score_new[1]);
						
						jsonscoredata = $.parseJSON(score_new[1]);
						////console.log($('#mychart-line'));
						console.log(jsonscoredata);
						setmatchscoreslines("",jsonscoredata);
						setscoreschat(jsonscoredata.scoreperformans);
                        setstatisticsradar(jsonscoredata);
						////console.log(score_new[0]);
						////console.log(score_new[1]);
						
						//showandhidetd(IsMobile());
						//////console.log(page);
                    },
					complete:function(){
						if(func){
							func();
						}
					
						
						if(isloading){
							$('#loadingimg').hide();
						}
					}
                })
		}
	
	window.onresize = function(){
		////console.log(myChart);
		if(myChart)myChart.resize();
		if(mypie)mypie.resize();
		if(myradar) myradar.reszie();
		}
		
	
	function setmatchscoreslines(selectedrd_id,playerscorecard) {
    if(!selectedrd_id){
		if(!selectrd_id){
			selectrd_id = rd_id;
		}
    }
	else{
		selectrd_id = selectedrd_id;
	}

	$('.divr').hide();
	////console.log($('#divr'+(parseInt(selectrd_id))));
	$('#divr'+(parseInt(selectrd_id))).show();
	
	if(!playerscorecard){
      playerscorecard = jsonscoredata;
    }
   
    if(!playerscorecard){
      return;
    }
    var scorecards = playerscorecard.scorecards;
    if(!scorecards || scorecards.length<=0){
      return;
    }
    var CourseYardCard = playerscorecard.holepars;
	var rdscorecard = "";
	var roundindex = selectrd_id-1;

    if (playerscorecard  && scorecards  && scorecards[roundindex]) {
     
		var keys = Object.keys(scorecards)
     
      var index = 0;
      var topar=0;
      var topars= [];
      var holepars=[];
      var holestitles = [];
      var holes =[];
	  for(var key in keys){
       //scorecards.forEach(item => {
		   var item = scorecards[key];
        var rdholes=[];
        var rdtopar=[];
        var rdholepars=[];
        var rdholestitles=[];
        rdholestitles.push('出发');
        rdholes.push({holeNo:-1});
        rdholepars.push('');
        rdtopar.push(topar);
       // ////console.log(item.matchtee);
       for(var holeindex=0;holeindex<18;holeindex++){
            var itemindex =  parseInt((item.matchtee)?item.matchtee:1) + holeindex - 1 ;
            //////console.log(itemindex);
            if(itemindex<9){
             
              rdholes.push(item.outScore[itemindex]);
                rdholepars.push(CourseYardCard.outInfo[itemindex].holePar);
            }
            else if(itemindex<18){
              rdholes.push(item.inScore[itemindex-9]);
              rdholepars.push(CourseYardCard.inInfo[itemindex-9].holePar);
            }
            else if(itemindex<27){
              rdholes.push(item.outScore[itemindex-18]);
              rdholepars.push(CourseYardCard.outInfo[itemindex-18].holePar);
            } 
            else if(itemindex<36){
              rdholes.push(item.inScore[itemindex-27]);
              rdholepars.push(CourseYardCard.inInfo[itemindex-27].holePar);
            }      
       }

      // console.log(rdholes);
		//console.log(rdholepars);
       rdholes.forEach(element => {
            
            var itemtopar = "";
            if(element.holetopar){

                topar+= parseInt(element.holetopar);
                itemtopar = topar;
                rdtopar.push(itemtopar);
            }
            if(element.holeNo>0){
                rdholestitles.push(element.holeNo);
            }
        });
        holepars.push(rdholepars);
        topars.push(rdtopar);
        holes.push(rdholes);
        holestitles.push(rdholestitles);
        index++;
     
	  }
     
      console.log(holepars);
     // ////console.log(holestitles);
     // ////console.log(topars);
     
    

      var option = {
              title: {
                text: playerscorecard.playername + '-' +  scorecards[roundindex].roundtitle  + ' <?php echo $lang=='CN' ?'成绩走势':'Performance'?>',
                left: 'center',
				top:'0%',
				textStyle:{
				//文字颜色
				color:'#fff',
				//字体风格,'normal','italic','oblique'
				fontStyle:'normal',
				//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
				fontWeight:'bold',
				//字体系列
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
				//字体大小
　　　　 		fontSize:18
			}

              },
			  borderradius:10,
			  backgroundColor:'',
			 
              color:['<?php echo $color; ?>'],
              legend: {
                data: [playerscorecard.playername],
				
                top: '12%',
                left: 'center',
				textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                color: '#000'//字体颜色
				},
                backgroundColor: '#fff',
                z:999
              },
              grid: {
                top:"28%",
                left:"8%",
                right:"8%",
                bottom:"10%"
              },
              tooltip: {
                show: true,
                trigger: 'axis',
				
				borderColor: '#777',  //外层边框颜色
				borderWidth: 1, //外层边框宽度
				borderRadius: 4, //外层边框圆角
                formatter: function (param) {
                  //////console.log(param);
                  var dataIndex = param[0].dataIndex;
                  console.log(holepars[roundindex]);
				  var str = '';
                  if(dataIndex == 0){
                    str = '<div style="width:fit-content;display:flex;flex-direction:column;" class="<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>"><div style="margin-bottom:6px;padding-left:5px;background-color:<?php echo $color; ?>;color:#fff;border-radius:4px; display:flex;align-items:center; ">'+playerscorecard.playername + '</div>' +
                    '<div style="display:flex;flex-direction:row;><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:#000"></span><div style="padding:0 16px 0 6px;width:auto"><?php  echo $lang=='CN' ?'出发':'Start' ?></div><div style="text-align:right;color:rgb(102,102,102);font-weight:700;flex:1"></div></div> ' +
                    '<div style="display:flex;align-items:center;margin-bottom:2px"><div style="display:flex;flex-direction:row;><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:#000"></span></div> <div style="padding:0 16px 0 6px;width:auto"><?php  echo $lang=='CN' ?'成绩':'Score' ?>:</div> <div style="text-align:center;color:#fff; width:40px; border-radius:5px; background-color:'+ _gettoparcolor(topars[roundindex][dataIndex]) +';font-weight:700;flex:1">'  + ((topars[roundindex][dataIndex]===0)?'E':(topars[roundindex][dataIndex]>0)?'+'+topars[roundindex][dataIndex]:(topars[roundindex][dataIndex]<0)?topars[roundindex][dataIndex]:'') + '</div></div></div>' 
                  }
                  else{
                  str =  '<div style="width:fit-content;display:flex;flex-direction:column;" class="<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>"><div style="margin-bottom:6px;padding-left:5px;background-color:<?php echo $color; ?>;color:#fff;border-radius:4px; display:flex;align-items:center; ">'+playerscorecard.playername +'</div>' +
                   '<div style="display:flex;flex-direction:row;"><div style="padding:0 16px 0 6px;width:auto"><?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'':'HOLE ' ?>'+ holestitles[roundindex][dataIndex] + '<?php  echo $lang=='CN' ?'号洞':'' ?> </div>'+  '<div style="text-align:right;color:#000;font-weight:700;flex:1" class="poppin">  PAR '+ holepars[roundindex][dataIndex] +  ' </div></div>' +
                  '<div style="display:flex;flex-direction:row;><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:#000"></span><div style="padding:0 16px 0 6px;width:auto"><?php  echo $lang=='CN' ?'杆数':'Stroke' ?> : </div> <div style="text-align:right;color:'+ _getscorecolor(holes[roundindex][dataIndex].holetopar,holes[roundindex][dataIndex].holeScore)+';font-weight:700;flex:1" class="poppin">'  + holes[roundindex][dataIndex].holeScore + ' ('   + 
                  _getholescoredisplayer(holes[roundindex][dataIndex].holetopar,holes[roundindex][dataIndex].holeScore)
                  +'）</div></div>' +
                  '<div style="display:flex;flex-direction:row;><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:#000"></span><div style="padding:0 16px 0 6px;width:auto"><?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'成绩':'Score' ?> :</div> <div style="text-align:center;width:40px;color:#fff;border-radius:5px; background-color:'+ _gettoparcolor(topars[roundindex][dataIndex])+';font-weight:700;flex:1" class="poppin">'   + ((topars[roundindex][dataIndex]===0)?'E':(topars[roundindex][dataIndex]>0)?'+'+topars[roundindex][dataIndex]:(topars[roundindex][dataIndex]<0)?topars[roundindex][dataIndex]:'') +'</div></div></div>' ;
                  }
				  ////console.log(str);
				  return str;
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: holestitles[roundindex],
				
                // show: false
              },
              yAxis: {
                x: 'center',
                type: 'value',
                splitLine: {
                  lineStyle: {
                    type: 'dashed'
                  },
				  color:'<?php echo $color; ?>',
                },
				
                inverse:true
                // show: false
              },
              series: [{
                name: playerscorecard.playername,
                type: 'line',
                smooth: true,
                data: topars[roundindex],
                
              }]
            };
			
	 ////console.log(option);
	 myChart="";
	 if(!myChart){
     myChart = echarts.init(document.getElementById('mychart-line'));
	 }
     myChart.setOption(option);
    
    
	}
	else {
		$('#mychart-line').hide();
	}
	}
	
	
	function setscoreschat(playerstatisc) {
	
    
    var data = [];
    var color=[];
    var lengend=[];
    if (playerstatisc) {

      if (playerstatisc.holeinone != 0) {
        data.push({
          value: playerstatisc.holeinone,
          name: 'HIO',
         
        });
        lengend.push('HIO');
        color.push('#FFCC00');
      }
      if (playerstatisc.eagle != 0) {
        data.push({
          value: playerstatisc.eagle,
          name: '<?php echo t('eagle') ;?>',
          color: '#FFCC00'
        });
        lengend.push('<?php echo t('eagle') ;?>');
        color.push('#FFCC00');
      }
      if (playerstatisc.birdie != 0) {
        data.push({
          value: playerstatisc.birdie,
          name: '<?php echo t('birdie') ;?>',
          color: '#DF212F'
        });
        lengend.push('<?php echo t('birdie') ;?>');
        color.push('#DF212F');
      }
      if (playerstatisc.par != 0) {
        data.push({
          value: playerstatisc.par,
          name: '<?php echo t('par_score') ;?>',
          color: '#53565A'
        });
        lengend.push('<?php echo t('par_score') ;?>');
        color.push('#53565A');
      }
      if (playerstatisc.boegey != 0) {
        data.push({
          value: playerstatisc.boegey,
          name: '<?php echo t('bogey') ;?>',
          color: '#1E90FF'
        });
        lengend.push('<?php echo t('bogey') ;?>');
        color.push('#1E90FF');
      }
      if (playerstatisc.dboegey != 0) {
        data.push({
          value: playerstatisc.dboegey,
          name: '<?php echo t('double_bogey') ;?>',
          color: '#473D98'
        });
        lengend.push('<?php echo t('double_bogey') ;?>');
        color.push('#473D98');
      }
      if (playerstatisc.worse) {
        data.push({
          value: playerstatisc.worse,
          name: '+3+',
          color: '#000'
        });
        lengend.push('+3+');
        color.push('#000');
      }

      var option = {
        
        color:color,
        calculable: true,
		title: {
                text: ' <?php echo $lang=='CN' ?'成绩分布':'Scores'?>',
                left: 'center',
				top:'45%',
				color:'#fff',
				textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
              },
		grid: {
                top:0,
                left:8,
                right:8,
                bottom:60
              },
        legend: {
          right:0,
          top:40,
          data: lengend,
		  textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
          icon: 'circle',
          itemWidth:10,
          itemHeight: 10,
		  color:'#fff', 
          orient: 'vorizontal',   // 垂直
        },
        tooltip: {
          show: true,
          formatter: " {b}：{c} ",
		  textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
        },
        series: [{
          label: {
			formatter: "{b}\r\n{c}<?php echo t('units');?>",
			rich:{
			name:{
				fontSize:12,
				color:"#666"
			},
			value:{
				fontSize:18,
				color:"#5c8ef3"
			}
			}

          },
          tooltip: {
            show: true,
            trigger: 'item',
			textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
            formatter: "{b}:{c}<?php echo t('units');?>"
          },
         
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['50%', '90%'],
          data: data
        }]
      };
      //////console.log(chart);
	   ////console.log(option);
	   mypie="";
	   if(!mypie){
		mypie = echarts.init(document.getElementById('mychart-pie'));
	   }
       mypie.setOption(option);
    
    } else {
      $('#mychart-pie').hide();
    }


  }
  
	function  setstatisticsradar(playerstatisc) {
	if(!playerstatisc){
		playerstatisc = jsonscoredata;
	}
	
	var scoreperformans = playerstatisc.scoreperformans;
	var agvscoreperformans = playerstatisc.agvscoreperformans;
	
    if (scoreperformans && agvscoreperformans) {
        
       var  indicator= [];
	    var data =  [
            {
              value: [],
              name: '<?php echo t('average') ;?>'
              
            },
            {
              value:[],
              name: playerstatisc.playername
            }
          ];
	   if(scoreperformans.holeinone){
		indicator.push(	
			{ name: 'HIO',
              max: scoreperformans.holeinone>agvscoreperformans.holeinone?scoreperformans.holeinone:agvscoreperformans.holeinone,
			  min: 0,
              fontSize: 14,
			  color:'#FFCC00',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
            })
		data[1].value.push(scoreperformans.holeinone);	
		data[0].value.push(agvscoreperformans.holeinone);	
	   }
	   
		indicator.push(	
			{ name: '<?php echo t('eagle') ;?>',
              max:scoreperformans.eagle>agvscoreperformans.eagle?scoreperformans.eagle:agvscoreperformans.eagle,
			  min: 0,
			  color:'#FFCC00',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              fontSize: 14
            })
		data[1].value.push(scoreperformans.eagle);	
		data[0].value.push(agvscoreperformans.eagle);	
	   
	  
		indicator.push(	
			{ name: '<?php echo t('birdie') ;?>',
              max:scoreperformans.birdie>agvscoreperformans.birdie?scoreperformans.birdie:agvscoreperformans.birdie,
			  min: 0,
			  color:'#DF212F',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              fontSize: 14
            })
		data[1].value.push(scoreperformans.birdie);	
		data[0].value.push(agvscoreperformans.birdie);	
	   
	   
		indicator.push(	
			{ name: '<?php echo t('par_score') ;?>',
             max:scoreperformans.par>agvscoreperformans.par?scoreperformans.par:agvscoreperformans.par,
			  min: 0,
			  color:'#53565A',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              fontSize: 14
            })
		data[1].value.push(scoreperformans.par);	
		data[0].value.push(agvscoreperformans.par);	
	   
	  
		indicator.push(	
			{ name: '<?php echo t('bogey') ;?>',
                max:scoreperformans.boegey>agvscoreperformans.boegey?scoreperformans.boegey:agvscoreperformans.boegey,
			  min: 0,
			  color:'#1E90FF',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              fontSize: 14
            })
		data[1].value.push(scoreperformans.boegey);	
		data[0].value.push(agvscoreperformans.boegey);	
	   
	 
		indicator.push(	
			{ name: '<?php echo t('double_bogey') ;?>',
                max:scoreperformans.dboegey>agvscoreperformans.dboegey?scoreperformans.dboegey:agvscoreperformans.dboegey,
			  min: 0,
			  color:'#473D98',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              fontSize: 14
            })
		data[1].value.push(scoreperformans.dboegey);	
		data[0].value.push(agvscoreperformans.dboegey);	
	   
	  
		indicator.push(	
			{ name: '+3+',
                max:scoreperformans.worse>agvscoreperformans.worse?scoreperformans.worse:agvscoreperformans.worse,
			  min: 0,
			  color:'#000',
			  fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              fontSize: 14
            })
		data[1].value.push(scoreperformans.worse);	
		data[0].value.push(agvscoreperformans.worse);	
	   //console.log(data);
	   //console.log(indicator);
		var color =  ['#fac858','<?php echo $color;?>'];
	
         
        var option = {
			fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
              backgroundColor: "#ffffff",
			color:color,
              tooltip: {
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                show: true,
                formatter: " {b}：{c} "
				
              },
			  
			 
             
			grid:{
				top:10,
				bottom:10,
				left:10,
				right:10,
				textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
			}
			,
			
            legend: {
                data: ['<?php echo t('average') ;?>',playerstatisc.playername],
				
				textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
				color:color,
                left:0,
				top:20,
				icon: 'circle',
				itemWidth:10,
				itemHeight: 10,
				orient: 'horizontal',   // 垂直
              },
              xAxis: {
                show: false
              },
              yAxis: {
                show: false
              },
              radar: {
                //shape: 'circle',
                indicator:indicator,
				textStyle:{
                fontSize: 14,//字体大小
				fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
				},
                center: ['50%', '50%'],
				radius: '60%',
              },
              series: [{
                tooltip: {
                  show: true,
                  fontsize:16,
                  trigger: 'item',
					
                  
                    formatter: function (param) {
                      //console.log(param);
                    
                      var index = param.dataIndex;
             
                      var str = ' <div style="width:fit-content;"><div style="margin-bottom:6px;background-color:' + color[index] +';color:#fff;border-radius:4px; display:flex;align-items:center;justify-content:center; "><div class="<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>">' + data[index].name  + '</div></div>';
					  var iindex = 0;
					  for(var i in indicator){
						str += 
						'<div style="display:flex;align-items:center;border-bottom:dotted 1px #1f1f1f;margin-bottom:2px"><div><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:'+ indicator[iindex].color +'"></span></div> <div style="padding:0 16px 0 6px;width:auto" class="<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>" >'+indicator[iindex].name+':</div> <div style="text-align:right;color:'+ indicator[iindex].color +';font-weight:700;flex:1" class="poppin">' + data[index].value[iindex]  +'<?php echo t('units');?></div></div>' ;
						iindex++;
					  }
					  str+= '</div>';
					  ////console.log(str);
						return str;
                    }
                    
                 
    
                },
				textStyle:{
               
						fontFamily:'<?php  echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'pangmen':'poppin' ?>',
                
					},
				
               // name: playerstatisctotal.groupcodetitle + '-<?php echo t('average') ;?>  VS ' + playerinfo.playername,
                type: 'radar',
				
                data:data,
                backgroundColor:['#fac858', '<?php echo $color;?>']
              }]
            };

            myradar="";
			if(!myradar){
				myradar = echarts.init(document.getElementById('mychart-radar'));
			}
			myradar.setOption(option);
         
         
    }else {
      $('#mychart-radar').hide();
    }
  }
  
  	function _gettoparcolor(topar){
		if(topar === 0){
		return '#53565A';
		}
		else if(topar<0){
		return '#B7001F';
		}
		else if(topar>0){
		return '#00438A';
		}
    
		else {
		return '';
		}
	}

	function _getscorecolor(holetopar,holescore){
		 if(holetopar === '0'){
			return '#53565A';
		}
		else if(holetopar==-1){
		return '#DF212F';
		}
		else if(holetopar==-2){
      return '#FFCC00';
    }
    else if(holetopar<=-3){
      return '#FFCC00';
    }
    else if(holetopar==1){
      return '#1E90FF';
    }
    else if(holetopar==2){
      return '#473D98';
    }
    else if(holetopar==3){
      return '#000';
    }
    else if(holetopar>3){
      return  '#000';
    }
    else {
      return '';
    }
	}
	
  function _getholescoredisplayer(holetopar,holescore){
    if(holescore == 1){
      return 'HIO';
    }
    if(holetopar === '0'){
        return '<?php echo t('par_score') ;?>';
    }
    else if(holetopar==-1){
      return '<?php echo t('birdie') ;?>';
    }
    else if(holetopar==-2){
      return '<?php echo t('eagle') ;?>';
    }
    else if(holetopar<=-3){
      return '信天翁';
    }
    else if(holetopar==1){
      return '<?php echo t('bogey') ;?>';
    }
    else if(holetopar==2){
      return '<?php echo t('double_bogey') ;?>';
    }
    else if(holetopar==3){
      return '3<?php echo t('bogey') ;?>';
    }
    else if(holetopar>3){
      return  '+'+holetopar;
    }
    else {
      return '';
    }
  }
  
  
	
</script>



<style>
	
#sta{
			position:relative;
		z-index:99;
		height:80px;
		width:100%;
		background-color:transparent;
		left:0;
		top:0;
	}

 .up{width: 40px;height:40px; position:fixed; left:2vw;bottom:5vw;}
.index_news{padding:0 15px;}
#loadingimg{
		width:40px;
		height:40px;
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%, -50%);
		z-index:999;
	}
	
#content {
    min-height: 360px;
    padding: 10px 15px 10px;
	overflow:hidden;
	max-height:100vh;
	
}
.score_back {
	text-align: right;
	padding-right: 14px;
}
.bt_back {
	display: inline-block;
	width: 40px;
	height: 18px;
	line-height: 18px;
	cursor: pointer;
	border: 1px solid #fff;
	color: #fff;
	font-size: 12px;
	text-align: center;
}
.pic{
	border-radius : 50%;
	width:80px;
	height:80px;
	margin-left:1px;
	padding:0px;
	object-fit: fill;
	
}
</style>

<style>
	#navi_wait {
		height: 35px;
		background-color: #E3E3E3;
	}

	#navi_wait ul li {
		width: 32%;
		display: inline;
		float: left;
		/*line-height:33px;*/

		line-height: 36px;
		list-style-position: inside;
		border-bottom: 1px solid #A5A5A5;
		text-align: center;
	}

	#navi_wait ul li a {
		color: #767676;
		font-size: 19px;
		letter-spacing: 5px;
	}
	.holebyhole{
		width:90%;
		height:90%;
		border-radius:10px;
		margin:auto auto auto auto;

	}
	
	.scoringtable{
		 border-collapse: collapse;  border-style:hidden;  box-shadow: 0 0 0 1px #d8d8d8; overflow:hidden;font-size:3vw;
	}
	
	.topartable{
		text-align:center;
		height:70px;
		border:none;
	}
	
	.topartable .num{
		height:40px;
		font-size:18px;
		font-weight:bolder;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:row;
		position:relative;
	}
	
	.topartable .num text{
		font-size:10px;
		position:absolute;
		right:20%;
		bottom:10;
		
	}
	
	.topartable .agv{
		height:auto;
		font-size:14px;
		font-weight:700;
		background:transparent;
	}
	
	
	.topartable .numdesc{
		height:40px;
		font-size:13px;
		font-weight:bold;
		background:linear-gradient(0deg, rgb(3, 40, 60), rgb(7, 77, 82));
		color:#fff;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		position:relative;
	}
	
	
	.topartable .numdesc .divr{	
	    font-size:12px;
		position:absolute;
		left:50%;
		bottom:0;
		transform:translatex(-50%);
	}
	
	.topar{
		width:80%;
		height:28px;
		border-radius:10px;
		margin:auto auto auto auto;
		color:#fff;
		display:flex;
		justify-content:center;
		align-items:center;
		
	}
	.undereven{
		font-weight:bolder;
		background-color:#B7001F; 
		color:#fff;
	}
	.even{
		font-weight:bolder;
		background-color:#53565A;
		color:#fff;
	}
	.pluseven{
		font-weight:bolder;
		background-color:#00438A;
		color:#fff;
	}
	.full{
		width:100vw;
		height:100vh;
		position:fixed;
		left:0;
		top:0;
		z-index:99999;
	}
	
	.full img{
		width:100%;
		height:100%;
		position:absolute;
		object-fit:cover;
	}
	
	.full .codediv{
		top:40%;
		left:50%;
		position:absolute;
		z-index:100000;
		width:90%;
		transform:translate(-50%,-50%);
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
	}
	
	.full .codediv p{
		margin-bottom:20px;
		text-align:center;
		width:100%;
		font-size:20px;
		font-weight:bolder;
	}
	
		.full .codediv .cn{
		margin-bottom:20px;
		text-align:center;
		width:100%;
		font-size:18px;
		
	}
	
	.full .codediv .date{
		margin-bottom:20px;
		text-align:center;
		width:100%;
		font-size:18px;
		color:#cfcfcf;
	}
	
	.full .codediv .codeinputs{
		
		width:90%;
		margin-left:auto;
		margin-right:auto;
		display:flex;
		flex-dirction:row;
		justify-content:center;
		align-items:center;
	}
	.full .codediv .codeinputs input{
		border-radius:10px;
		width:50px;
		height:50px;
		margin-left:auto;
		margin-right:auto;
		border:1px solid #cfcfcf;
		font-size:22px;
		font-weight:bolder;
	}
	.full .imgsponser{
		top:20%;
		left:50%;
		position:absolute;
		z-index:100000;
		width:100%;
		height:auto;
		transform:translate(-50%,-50%);
	}
	
		.plphoto{width:40px;height:40px;background-color:#fff;border-radius:100%; margin-left:20px;margin-right:20px;}
		.menu{padding-left:2%;padding-right:2%; display:flex;flex-direction:row;}
		.menubutton{
			min-width:120px;
			height:50px;
			border:2px solid #fff;
			border-radius:2px;
			background:linear-gradient(0deg, rgb(3, 40, 60), rgb(7, 77, 82));
			margin-left:auto;
			margin-right:auto;
			 display:flex;flex-direction:row;
			 justify-content:center;
			 align-items:center;
		}
	
	.scoringlists{
			overflow:hidden;
			overflow-y:scroll;
			border:1px solid #fff;
		
	}
	
	.videolists{
		width:100%;
		height:135px;
		overflow-x:scroll;
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
		margin-top:10px;
		margin-bottom:10px;
	}
	
	.videolists .videoitem {
		width:240px;
		height:135px;
		margin-left:5px;margin-right:5px;
		border-radius:5px;
		position:relative;
		
	}
	.videolists .videoitem  img {
		width:240px;
		height:135px;
	
	}
	
	.videolists .videoitem  text {
		width:240px;
		position:absolute;
		bottom:0;
		height:40px;
		display:flex;
		justify-content:center;
		align-items:center;
		color:#fff;
	}
    .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .modalcontent {
        backgroundcolor: #fefefe;
        margin: 15% auto;
        padding: 5px;
        /*border: 1px solid #888;
        width: 80%;*/
    }
    .close {
        color: #aaa;
        float: right;
        fontsize: 28px;
        fontweight: bold;
    }
	
</style></head>
<body id="body">
<div id="fullloading" class="full"  style="display:none;"onclick="closefullpre()">
		<img  id="imgfullloading" src="./images/pre.png"/>
		
	
	</div>
	

 <img  id="loadingimg" src="./images/icon_load.gif" style="display:block;"/>
	
	
    <div id="content">
	<div id="sta">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tbody>
				<tr>
					<td style="text-align:center;"><img src="./images/000.png" style="width:350px;height:80px" /></td>
			
				</tr>
			</tbody>
		</table>
    </div>
		<div class="pullrefresh" style="display:none;"></div>
        
		<div class="tt_bar" style="">
		  
			<table border="0" cellpadding="0" cellspacing="0" width="100%">
				<tbody>
					<tr>
						<td class="score_title2"><div class="p_b" style="background:linear-gradient(0deg, rgb(3, 40, 60), rgb(7, 77, 82)); border-radius:5px;width:220px;height:50px;display: flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; overflow:hidden;"><text <?php echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?'':'class="poppin"';?>><?php echo $lang=='CN' && $players['playerName'][$pl_id]!=$players['playerEnName'][$pl_id]?$players['playerName'][$pl_id]:$players['playerEnName'][$pl_id];?></text></div></td>
                        <?php 
                           if ($players['pl_photo'][$pl_id]){
                                echo '<td class="score_title2"><img style="border: 5px solid #fff" class="pic"  src="https://miniapp.scoringchina.com/admin/club/adm/images/players/'.$players['pl_photo'][$pl_id].'"  ></td>';
                            }
							else{
								 echo '<td class="score_title2"><img style="border: 5px solid #fff" class="pic"  src="./images/player.png"  ></td>';
							}
                        ?>
                       
					</tr>
				</tbody>
			</table>
		</div>
		
		<div id="scoringlists" class="scoringlists">
		</div>
		


    </div>

<div style="text-align:centre;justify-content: center; display:none;">
<img src="./images/ad.jpg" style="width:100%;height:auto">  </div>
	<img src="images/up.png" class="up" id="go_top" onclick="gotottop();">
	<div class="bottommenu"><div class="<?php echo $css_class; ?>" onclick="goback()"><?php echo t('back'); ?></div>
	
	<!--<div onclick="gotomain()">首页</div>--></div>
<div id="bottom" style="background-color:#fff;text-align:centre;display:none;justify-content: center;">
	<div id="bootom-top">
        <span style="width:100%;text-align:center">技术支持  @斯科云科技</span>
       <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "JijETG4HGxctAarj",ck: "JijETG4HGxctAarj"})</script>
	</div>
</div>
<div class="modal" id="myModal">
    <div class="modalcontent">
        <span class="close">&times;</span>
        <p>
        <video id="video_url" controls>
            Your browser does not support the video tag.
        </video>
        </p>
    </div>
</div>
</body>
<script>
var mt_id = <?php echo $mt_id; ?>;
	function inputcode(index){
		var str = $('#code'+index).val();
		var code = "";
		for(var codeindex = 0 ;codeindex<=3;codeindex++){
			code +=  $('#code'+codeindex).val().toString();
		}
		if(code ==mt_id ) //通过验证码{
		{
			////console.log("首次被加载");
			
			for(var codeindex = 0 ;codeindex<=3;codeindex++){
				$('#code'+codeindex).blur();
			}

			document.title = '<?php echo $players['playerName'][$pl_id];?>-成绩卡-<?php echo $match_cn_name;?>-Scoring By 斯科云科技';
			//sessionStorage.setItem("isReload", true);
			
		}
		else{
			if(code.length ==4){
				for(var codeindex = 0 ;codeindex<=3;codeindex++){
				  $('#code'+codeindex).css('border','1px solid red');
				  
				}
				
			}
			else{
				for(var codeindex = 0 ;codeindex<=3;codeindex++){
				  $('#code'+codeindex).css('border','1px solid #cfcfcf');
				}
			}
			if(str!=''){
				var next = index+1;
				if(index == 3){
					next = 0;
				}
		
				$('#code'+next).focus();
			}
		}
	}
	//proloading();

	var pretime = "";
	function proloading(){
		
		$('#code0').focus();
		
		let storage = new Storage();
		let value = storage.getItem('ischeked');
		if(value == 1){
			////console.log("页面直接进入");
			document.title = '<?php echo $players['playerName'][$pl_id];?>-成绩卡-<?php echo $match_cn_name;?>-Scoring By 斯科云科技';
			$('#fullloading').hide();
			//$(this).fadeOut("fullloading");
			////console.log($('#fullloading'));
		}else{
			
			//$('#fullloading').fadeIn();
			let storage = new Storage();
			storage.setItem({
				name:"ischeked",
				value:1,
				expires:1*24*3600*1000,   //一天 默认
                startTime:new Date().getTime()//记录何时将值存入缓存，毫秒级
			})
			pretime = setTimeout(function(){
				$('#fullloading').fadeOut(2000);
			
			},2000);
			
		}
	}
	
	
	function closefullpre(){
		////console.log($('#fullloading'));
		$('#fullloading').fadeOut(1000);
		
		clearTimeout(pretime);
	}

function opevides(src) {
    // 创建一<?php echo t('units');?>弹出框
    /*$("#video_url").attr("src",src)
    var modal = document.getElementById("myModal");
    modal.style.display = "block";*/
	window.open(src,'_blank');
}
$(document).ready(function() {
    // 获取弹窗元素和关闭按钮元素
    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];
    // 为关闭按钮添加点击事件监听器
    span.onclick = function() {
        modal.style.display = "none";
    }
    // 为弹窗外的区域添加点击事件监听器，用于关闭弹窗（点击弹窗外的区域也可以关闭弹窗）
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
});
</script>
</html>